<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agent Boss 前端测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f7fa;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        .content {
            padding: 20px;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
        }
        .test-section h3 {
            margin-top: 0;
            color: #1e293b;
        }
        button {
            background: #667eea;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #5a67d8;
        }
        button:disabled {
            background: #cbd5e1;
            cursor: not-allowed;
        }
        input, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            margin: 5px 0;
            font-family: inherit;
        }
        textarea {
            height: 100px;
            resize: vertical;
        }
        .result {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 15px;
            margin: 10px 0;
            white-space: pre-wrap;
            font-family: monospace;
            font-size: 14px;
        }
        .status {
            padding: 10px;
            border-radius: 6px;
            margin: 10px 0;
        }
        .status.success {
            background: #dcfce7;
            color: #166534;
            border: 1px solid #bbf7d0;
        }
        .status.error {
            background: #fef2f2;
            color: #dc2626;
            border: 1px solid #fecaca;
        }
        .status.info {
            background: #eff6ff;
            color: #2563eb;
            border: 1px solid #dbeafe;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🤖 Agent Boss 前端测试</h1>
            <p>测试前端与后端agent_boss应用的集成</p>
        </div>
        
        <div class="content">
            <!-- 服务器状态检查 -->
            <div class="test-section">
                <h3>🔍 服务器状态检查</h3>
                <button onclick="checkServerStatus()">检查服务器状态</button>
                <div id="serverStatus" class="status info">点击按钮检查服务器状态</div>
            </div>

            <!-- Token管理 -->
            <div class="test-section">
                <h3>🔑 Token管理</h3>
                <div>
                    <label>当前Token:</label>
                    <input type="text" id="currentToken" placeholder="当前token" readonly>
                </div>
                <div>
                    <label>用户ID:</label>
                    <input type="text" id="currentUserId" placeholder="当前用户ID" readonly>
                </div>
                <button onclick="setTestToken()">设置测试Token</button>
                <button onclick="clearToken()">清除Token</button>
                <button onclick="validateToken()">验证Token</button>
                <div id="tokenStatus" class="status info">Token状态信息将显示在这里</div>
            </div>

            <!-- 聊天测试 -->
            <div class="test-section">
                <h3>💬 聊天测试</h3>
                <div>
                    <label>测试消息:</label>
                    <textarea id="testMessage" placeholder="输入测试消息...">帮我查询Python工程师职位</textarea>
                </div>
                <button onclick="sendTestMessage()">发送消息</button>
                <button onclick="sendQuickTest()">快速测试</button>
                <div id="chatResult" class="result" style="display: none;"></div>
            </div>

            <!-- 工具测试 -->
            <div class="test-section">
                <h3>🛠️ 工具测试</h3>
                <button onclick="testJobSearch()">测试职位搜索</button>
                <button onclick="testResumeGeneration()">测试简历生成</button>
                <button onclick="testKnowledgeSearch()">测试知识检索</button>
                <div id="toolResult" class="result" style="display: none;"></div>
            </div>

            <!-- 调试信息 -->
            <div class="test-section">
                <h3>🐛 调试信息</h3>
                <button onclick="getDebugInfo()">获取调试信息</button>
                <div id="debugResult" class="result" style="display: none;"></div>
            </div>
        </div>
    </div>

    <script>
        // API配置
        const API_BASE_URL = 'http://127.0.0.1:8000';
        const TEST_TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJleHAiOjE3NjA5NTc2MzMsImlhdCI6MTc2MDM1MjgzM30.pFpENHLS_JyNT8x0JyIx3dTKyK8-JTFrNB7KvZJv7I4';

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateTokenDisplay();
        });

        // 更新Token显示
        function updateTokenDisplay() {
            const token = localStorage.getItem('access_token') || '';
            const userId = localStorage.getItem('userid') || '';
            document.getElementById('currentToken').value = token ? token.substring(0, 50) + '...' : '无';
            document.getElementById('currentUserId').value = userId || '无';
        }

        // 设置测试Token
        function setTestToken() {
            localStorage.setItem('access_token', TEST_TOKEN);
            localStorage.setItem('userid', '1');
            updateTokenDisplay();
            showStatus('tokenStatus', 'success', '已设置测试Token');
        }

        // 清除Token
        function clearToken() {
            localStorage.removeItem('access_token');
            localStorage.removeItem('userid');
            updateTokenDisplay();
            showStatus('tokenStatus', 'info', '已清除Token');
        }

        // 验证Token
        function validateToken() {
            const token = localStorage.getItem('access_token');
            const userId = localStorage.getItem('userid');
            
            if (!token || !userId) {
                showStatus('tokenStatus', 'error', 'Token或用户ID不存在');
                return;
            }

            if (token.length < 100) {
                showStatus('tokenStatus', 'error', 'Token格式可能不正确');
                return;
            }

            showStatus('tokenStatus', 'success', 'Token格式验证通过');
        }

        // 检查服务器状态
        async function checkServerStatus() {
            try {
                const response = await fetch(`${API_BASE_URL}/agent_boss/debug/`);
                const data = await response.json();
                
                if (response.ok) {
                    showStatus('serverStatus', 'success', `服务器在线 - ${data.message}`);
                } else {
                    showStatus('serverStatus', 'error', `服务器响应异常: ${response.status}`);
                }
            } catch (error) {
                showStatus('serverStatus', 'error', `服务器连接失败: ${error.message}`);
            }
        }

        // 发送测试消息
        async function sendTestMessage() {
            const message = document.getElementById('testMessage').value.trim();
            if (!message) {
                alert('请输入测试消息');
                return;
            }

            await sendMessage(message, 'chatResult');
        }

        // 快速测试
        async function sendQuickTest() {
            const quickTests = [
                '帮我查询Python工程师职位',
                '帮我生成一份简历',
                '搜索Java开发相关职位'
            ];
            
            const randomMessage = quickTests[Math.floor(Math.random() * quickTests.length)];
            document.getElementById('testMessage').value = randomMessage;
            await sendMessage(randomMessage, 'chatResult');
        }

        // 测试职位搜索
        async function testJobSearch() {
            await sendMessage('查询Python工程师职位', 'toolResult');
        }

        // 测试简历生成
        async function testResumeGeneration() {
            await sendMessage('帮我生成一份Python开发工程师的简历', 'toolResult');
        }

        // 测试知识检索
        async function testKnowledgeSearch() {
            await sendMessage('什么是微服务架构？', 'toolResult');
        }

        // 获取调试信息
        async function getDebugInfo() {
            try {
                const token = localStorage.getItem('access_token');
                const response = await fetch(`${API_BASE_URL}/agent_boss/debug/`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token}`
                    },
                    body: JSON.stringify({
                        test: 'debug_data',
                        question: '调试问题'
                    })
                });
                
                const data = await response.json();
                showResult('debugResult', JSON.stringify(data, null, 2));
            } catch (error) {
                showResult('debugResult', `调试信息获取失败: ${error.message}`);
            }
        }

        // 发送消息的通用函数
        async function sendMessage(message, resultElementId) {
            try {
                const token = localStorage.getItem('access_token');
                if (!token) {
                    alert('请先设置Token');
                    return;
                }

                const response = await fetch(`${API_BASE_URL}/agent_boss/chat/`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token}`
                    },
                    body: JSON.stringify({
                        question: message,
                        session_id: `test_${Date.now()}`,
                        user_id: localStorage.getItem('userid') || '1'
                    })
                });

                const data = await response.json();
                
                if (response.ok && data.code === 200) {
                    showResult(resultElementId, `✅ 成功\n\n请求: ${message}\n\n响应: ${data.data.response}`);
                } else {
                    showResult(resultElementId, `❌ 失败\n\n请求: ${message}\n\n错误: ${data.message || '未知错误'}`);
                }
            } catch (error) {
                showResult(resultElementId, `❌ 网络错误\n\n请求: ${message}\n\n错误: ${error.message}`);
            }
        }

        // 显示结果
        function showResult(elementId, content) {
            const element = document.getElementById(elementId);
            element.textContent = content;
            element.style.display = 'block';
        }

        // 显示状态
        function showStatus(elementId, type, message) {
            const element = document.getElementById(elementId);
            element.className = `status ${type}`;
            element.textContent = message;
        }
    </script>
</body>
</html>
